<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('2ysz_hCscAerxqw55YR7s')}}</p>
      <div class="wrap-operate-container">
        <div class="wrap-operate-area">
          <div class="operate-select-item">
            <label class="title">{{$t('xz5AFl8ygS2V-v13rJdPJ')}}:</label>
            <div class="content">
              <Select
                v-model="customId"
                style="width: 200px"
                @on-change="changeCustom"
              >
                <Option
                  v-for="item in customs"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-select-item">
            <label class="title">{{$t('o9MoZ8GYpy_bxl_Uh62i0')}}:</label>
            <div class="content">
              <Select
                v-model="icNumber"
                style="width: 200px"
                @on-change="changeICNumber"
              >
                <Option
                  v-for="item in icNumbers"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.id }}
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-btn-item">
            <Button class="item" type="info" icon="ios-search" @click="changeICNumber"
              >{{$t('9ZYL6riI1fheWqEf_uo-M')}}</Button
            >
            <Button
              class="item"
              type="info"
              icon="ios-card"
              @click="exportExcel"
              >{{$t('ssHl1qTS2oMuNp3RZnkQY')}}</Button
            >
          </div>
        </div>
      </div>
      <Table
        ref="table"
        :loading="loading"
        :columns="columns"
        :data="data"
        no-filtered-data-text=""
      >
      </Table>
    </Card>
  </div>
</template>

<script>
import { getCustomerList, getCustomerCardIdList, getRechargeByCardId } from '@/api/data2'
export default {
  name: 'rechargelog',
  data () {
    return {
      customId: '',
      customs: [],
      icNumber: '',
      icNumbers: [],
      loading: false,
      columns: [
        {
          title: this.$t('o9MoZ8GYpy_bxl_Uh62i0'),
          key: 'cardid',
          width: 150,
          fixed: 'left'
        },
        {
          title: this.$t('80RpzyHfrhmRj77N-dwCX'),
          key: 'rechargetime',
          width: 250
        },
        {
          title: this.$t('OgCXwvjA3Bh7NoI3335mj'),
          key: 'rechargemoney',
          width: 200
        },
        {
          title: this.$t('fWR__wDWaiHLQYablcbDu'),
          key: 'rechargebeforemoney',
          width: 200
        },
        {
          title: this.$t('VS44osdhM-QYfHxOIxOuE'),
          key: 'rechargeaftermoney',
          width: 200
        },
        {
          title: this.$t('aWE0A8HStCgsdlLI3BDTA'),
          key: 'rechargeoperator',
          width: 200
        }
      ],
      data: []
    }
  },
  created () {
    this.queryCustomLists()
  },
  computed: {
    tableExcelName () {
      return this.$store.state.user.userName + this.$t('yM7ctsTRW0eps6Ydp_pZ_') + this.icNumber + this.$t('bM0ZE5HSscQi_UliCxVqU') + this.$t('1pvGh7nzkgNiEGic7c8tj')
    }
  },
  methods: {
    async queryCustomLists () {
      const { code, data, desc } = await getCustomerList({
        stationid: +this.$store.state.user.stationId
      })
      if (code == 200) {
        const datalist = data.datalist || []
        datalist.forEach(d => {
          d.stationName = this.$store.state.user.userName
        })
        this.customs = datalist
      } else {
        this.$Message.error(desc)
      }
    },
    async changeCustom () {
      const { code, data, desc } = await getCustomerCardIdList({
        custid: +this.customId
      })
      if (code == 200) {
        const datalist = data.datalist || []
        this.icNumbers = datalist
      } else {
        this.$Message.error(desc)
      }
    },
    async changeICNumber () {
      this.loading = true
      const { code, data, desc } = await getRechargeByCardId({
        cardid: this.icNumber + ''
      })
      if (code == 200) {
        this.data = data.datalist || []
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    }
  }
}
</script>
